<template>
	<div class="content list_div" v-loading="loading" element-loading-text="正在加载..." element-loading-background="rgba(0, 0, 0, 0.4)">
		<div class="l_item" v-for="(i, k) in companyList" :key="k">
			<div class="list_item flex">
				<div class="drop-new"></div>
				<div class="topic" v-if="i.label_name && i.label_name.length > 0">{{ i.label_name[0] }}</div>
				<div class="title">{{ i.company_name }}</div>
				<div class="cl"></div>
			</div>
			<div class="description">
				<div class="address" v-if="i.industry_name && i.industry_name.length > 0">{{ i.industry_name[0] }}</div>
				<div class="line" v-if="i.industry_name && i.industry_name.length > 0">|</div>
				<div class="address" v-if="i.city_name && i.city_name.length > 0">
					{{ i.city_name[0] }}
				</div>
				<div class="line" v-if="i.city_name && i.city_name.length > 0">|</div>
				<div class="time">{{ i.register_money }}</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { ref, defineExpose } from 'vue';
import { getList as getComList } from '/@/api/com/index';

let companyList = ref([]);
let loading = ref(false);

let page = 1;
let query = {};

const init = (data) => {
	page = 1;
	query = data;
	companyList.value.length = 0;
	getList();
};

const getList = () => {
	loading.value = true;
	getComList({ page, ...query }).then((res) => {
		let list = res.data.code.data.map((i) => {
			i.city_name.shift();
			return i;
		});
		companyList.value.push(...list);
		loading.value = false;
	});
};

defineExpose({
	init,
});
</script>
<style lang="scss" scoped>
.content {
	height: 100%;

	li:hover {
		background-color: rgba(24, 144, 255, 0.01);
	}
	.l_item {
		list-style: none;
		height: auto;
		line-height: 30px;
		padding: 10px;
		cursor: pointer;
		&:hover {
			background: #0001;
		}
		.list_item {
			// height: 30px;
			.drop-new {
				background-color: #efa151;
				width: 8px;
				height: 8px;
				border-radius: 4px;
				margin-top: 11px;
				margin-right: 10px;
			}
			.topic {
				height: 22px;
				background: linear-gradient(140deg, #ff3334, #fe7527);
				border-radius: 0px 6px 0px 6px;
				color: #fff;
				text-align: center;
				line-height: 22px;
				font-size: 14px;
				padding: 0 8px;
				margin-top: 4px;
			}
			.title {
				font-weight: 400;
				font-size: 16px;
				color: #000000;
				margin-left: 10px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.time {
				color: #999999;
			}
		}
		.description {
			color: #999999;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-left: 20px;
			.address {
				float: left;
				margin-right: 10px;
			}
			.line {
				float: left;
				margin-right: 10px;
			}
			.time {
				float: left;
				margin-right: 10px;
			}
		}
	}
}
</style>
